<template>
	<view class="">
		<Header title="联系客服" :isHome="true" :isWhite='true'></Header>
		<view class="main">
			<view class="title">
				联系电话
			</view>
			<view class="flex">
				<view class="flex1" @click="callPhone(mobile)">
					<image src="/static/mobile.png" mode=""></image>
					<view class="mobile">
						{{mobile}}
					</view>
				</view>
				<view class="flex1 right" @click="callPhone(phone)">
					<image src="/static/phone.png" mode=""></image>
					<view class="mobile">
						{{phone}}
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="title">
				微信客服
			</view>
			<view class="wxCon" @click="handleLook(imgUrl+qrcode)">
				<image :src="imgUrl+qrcode" mode=""></image>
				<view class="">
					长按识别添加客服微信
				</view>
			</view>
		</view>
		<view class="main">
			<view class="title">
				我要反馈
			</view>
			<view class="choose">
				<view class="leftTitle">
					反馈类型
				</view>
				<view class="right" @click="show=true">
					<view class="" :class="{'type':type}">
						{{type||'请选择类型'}}
					</view>
					<view class="">
						<image src="/static/rightgray.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="content">
				<textarea v-model="feedbackContent" name="" id="" cols="30" rows="10" placeholder='请输入200字以内的反馈内容'
					maxlength="200" @input="countWords"></textarea>
				<text class="word-count">{{currentCount}} / 200</text>
			</view>
			<view class="submitBtn" @click="setType">
				提交反馈
			</view>
		</view>
		<view>
			<u-picker :show="show" :columns="columns" confirmColor='#222' @confirm="confirm"></u-picker>
		</view>
	</view>
</template>

<script>
	import {
		get,
		img_url,
		post
	} from '../../utils/request';
	export default {
		data() {
			return {
				imgUrl: img_url,
				mobile: '13888888888',
				phone: '073-18888888',
				qrcode: '',
				feedbackContent: '', // 用于双向绑定textarea中的输入内容
				currentCount: 0, // 记录当前已输入的字数
				show: false,
				columns: [
					['bug', '错误', '反馈']
				],
				type: '',
				typeId: ''
			}
		},
		onLoad() {
			this.getKefu()
			this.getType()
		},
		methods: {
			setType() {
				post('/feedback/add_feedback', {
						type: this.typeId,
						content: this.feedbackContent,
					})
					.then(res => {
						if(res.code==1){
							uni.showToast({
								icon: 'none',
								title: '提交成功'
							})
							this.feedbackContent = ''
						}else{
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
					.catch(err => {
						uni.showToast({
							icon: 'none',
							title: '提交失败'
						})
					});
			},
			getType() {
				get('/system/get_feedback_type')
					.then(res => {
						this.columns = [Object.values(res.data)];
						this.type = this.columns[0][0]
						const keys = Object.keys(res.data);
						this.typeId = keys[0]
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			getKefu() {
				get('/system/get_contact')
					.then(res => {
						this.mobile = res.data.mobile
						this.phone = res.data.tel
						this.qrcode = res.data.qrcode
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			callPhone(number) {
				uni.makePhoneCall({
					phoneNumber: number
				});
			},
			countWords() {
				this.currentCount = this.feedbackContent.length;
			},
			confirm(e) {
				console.log(e, 'eee');
				this.type = e.value[0]
				this.typeId = e.indexs[0] + 1

				console.log(this.typeId);
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 28rpx;
		box-sizing: border-box;
		margin: 32rpx auto;

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.flex {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16rpx;

			.flex1 {
				display: flex;
				align-items: center;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 32rpx;
				color: #1664FF;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.right {
				border-left: 2rpx solid #ccc;
				padding-left: 28rpx;


			}
		}

		.wxCon {
			text-align: center;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;

			image {
				width: 296.51rpx;
				height: 296.51rpx;
				margin: 25rpx 0 22rpx;
			}
		}

		.choose {
			display: flex;
			justify-content: space-between;
			padding: 28rpx;
			width: 630rpx;
			height: 100rpx;
			background: #F5F5F5;
			border-radius: 12rpx;
			box-sizing: border-box;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 32rpx;
			margin: 20rpx 0;

			.leftTitle {
				color: #222222;
			}

			.right {
				color: #CCCCCC;
				display: flex;
				align-items: center;

				.type {
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 32rpx;
					color: #222222;
				}

				image {
					width: 32rpx;
					height: 32rpx;
					display: block;
					margin-left: 10rpx;
				}
			}
		}

		.content {
			position: relative;

			textarea {
				width: 630rpx;
				height: 324rpx;
				background: #F8F8F8;
				border-radius: 8rpx;
				padding: 28rpx;
				box-sizing: border-box;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 32rpx;
			}

			text {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 24rpx;
				color: #CCCCCC;
				position: absolute;
				bottom: 28rpx;
				right: 28rpx;
			}
		}

		.submitBtn {
			width: 630rpx;
			height: 96rpx;
			background: #1A1A1A;
			border-radius: 48rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 96rpx;
			margin: 28rpx 0;
		}
	}
</style>